<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东搜索</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/home.css"/>
</head>
<body>
<div id="root">

</div>
<script type="text/babel">
    const datas = [
        {
            createTime: 1620023818183,
            id: "1389106691294900226",
            imgPath: "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBw",
            name: "<span className='title' style='color:red'>Java</span>微服务架构实战(SpringBoot+SpringCloud+Docker+ <span className='title' style='color:red'>Java</span>微服务架构实战(SpringBoot+SpringCloud+Docker+",
            price: "￥43.60",
            sku: 65137048523
        },
        {
            createTime: 1620023818183,
            id: "1389106691294900227",
            imgPath: "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBw",
            name: "<span className='title' style='color:red'>Java</span>微服务架构实战(SpringBoot+SpringCloud+Docker+ <span className='title' style='color:red'>Java</span>微服务架构实战(SpringBoot+SpringCloud+Docker+",
            price: "￥43.60",
            sku: 65137048523
        }
    ]
    class Header extends React.Component{
        state = {
            keywords : "",
            carNum : 0,
            datasource : [],
            currentPage: 1,
            pages:0
        }
        getdata = (keywords,page = 1)=>{
            axios.get(`http://127.0.0.1:2021/shopstore/good/serachByKeywords/${keywords}/${page}`,{
                headers: {
                    'token': JSON.parse(localStorage.getItem('token')),
                    'userId': JSON.parse(localStorage.getItem('admin')).userId
                }
            }).then((resp)=>{
                if(resp.data.status === 200){
                    this.setState(()=>{
                        return {
                            datasource:resp.data.list,
                        }
                    })
                }else if(resp.data.status === 403){
                    alert(resp.data.message);
                }else{
                    alert("请求数据丢失");
                }
            }).catch((error)=>{
                alert("超时")
            })
        }
        inputHandler = ()=>{
            this.setState(()=>{
                return {keywords: this.inputRef.value}
            })
        }
        //模糊搜索
        search = ()=>{
            const { keywords,currentPage } = this.state;
            //发送请求
            this.getdata(keywords,currentPage)
        }
        //添加入库
        addCar = (data)=>{
            return ()=>{
                if(window.confirm("确认入库?")){
                    //此处写添加入库的业务逻辑
                    data = Qs.stringify(data);
                    axios.post(`http://127.0.0.1:2021/shopstore/good/saveGood`,data,{
                        headers: {
                            'token': JSON.parse(localStorage.getItem('token')),
                            'userId': JSON.parse(localStorage.getItem('admin')).userId
                        }
                    }).then((resp)=>{
                        console.log(resp.data)
                        if(resp.data.status){
                            alert(resp.data.message)
                        }else if(resp.data.status === 403){
                            alert("身份认证失败,请重新登陆");
                        }else{
                            alert(resp.data.message)
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                }
            }
        }
        //页面跳转
        jumpToPage = ()=>{
            return ()=>{
                this.searchistory();
            }
        }
        //搜索历史点击事件
        searchistory = ()=>{
            axios.get(`http://127.0.0.1:2021/shopstore/good/serachistory`,{
                headers: {
                    'token': JSON.parse(localStorage.getItem('token')),
                    'userId': JSON.parse(localStorage.getItem('admin')).userId
                }
            }).then((resp)=>{
                if(resp.data.status === 403){
                    alert(resp.data.message);
                    parent.location.href="../login.html"
                }else if(resp.data.status === 200){
                    this.setState(()=>{
                        return {
                            datasource:resp.data.list,
                        }
                    })
                }else {
                    alert("数据丢失");
                }
            }).catch((error)=>{
                console.log(error)
            })
        }
        render(){
            const { datasource } = this.state;
            return (
                <div className="all">
                    <div className="header">
                        <div className="input-div">
                            <input onChange={this.inputHandler} type="text" placeholder="keywords" ref={(e)=>{this.inputRef = e}}/>
                            <button onClick={this.search} className="search-button">搜索</button>
                        </div>
                        <div className="myCar">
                            <button onClick={this.searchistory}>搜索历史</button>
                        </div>
                    </div>
                    <div className="datashow">
                        <ul className="wragall">
                            {
                                datasource.map((item)=>{
                                    return (
                                        <li className="item" key={item.goodId}>
                                            <div className="item-img">
                                                <img src={`data:image/jpeg;base64,${item.imgBase64}`} alt=".."/>
                                            </div>
                                            <div className="item-price">
                                                {item.goodPrice}
                                            </div>
                                            <div dangerouslySetInnerHTML={{__html:item.goodName}} className="item-name">

                                            </div>
                                            <div className="item-createtime">
                                                {dayjs(item.goodCreateTime).format('YYYY-MM-DD HH:mm:ss')}
                                            </div>
                                            <div className="item-saler">
                                                商家:{item.goodSaler}
                                            </div>
                                            <div className="item-car" style={{textAlign:'center'}}>
                                                <button className="car-button" onClick={this.addCar(item)}>添加入库</button>
                                            </div>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
            )
        }
    }
    ReactDOM.render(
        <div>
            <Header/>
        </div>,document.getElementById("root"));
</script>
</body>
</html>